<template>
  <div class="set-container">
    <Header :title="title"></Header>
    <div class="user">
      <title>
        <div class="photo"><img src="@/style/images/Snipaste_2022-08-30_23-11-47.png" alt=""></div>
        <div class="user">
          <p v-model="name">{{ userInfo.name }}</p>
          <span>{{ userInfo.phone }}</span>
          <br>
          <span>{{ userInfo.email }}</span>
        </div>
        <div class="user-msg">
          <van-cell @click="showPopup">修改信息</van-cell>
          <van-popup v-model="show" position="left" closeable :style="{ width: '82%',height:'100%'}">
            <van-form @submit="onSubmit">
              <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' ,marginTop:'54px'}">
                基本信息
              </van-divider>
              <van-field v-model="name" disabled name="姓名" label="姓名" placeholder="姓名" />
              <van-field v-model="birthday" name="生日" label="生日" placeholder="生日" />
              <van-field v-model="address" name="住址" label="住址" placeholder="住址" />
              <van-field v-model="mail" name="邮箱地址" label="邮箱地址" placeholder="邮箱地址" />
              <span :style="{color:'#646566',padding:'10px 16px'}">上传头像：</span>
              <!-- 上传头像 -->
             <!-- <van-uploader :after-read="afterRead" /> -->
             <van-uploader v-model="fileList" :max-count="1" :after-read="afterRead" :before-read="beforeRead" @delete="delHeadImg" >
              <!-- <template #preview-cover="{ file } ">
              <div class="preview-cover van-ellipsis">{{ file.name }}</div>
              </template> -->
            </van-uploader>
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">保存</van-button>
              </div>
            </van-form>
          </van-popup>
        </div>
      </title>
    </div>
    <div class="content">
      <div class="user-list">
        <van-cell title="我的消息" is-link />
        <van-cell title="清除缓存" @click="clearCache()" is-link />
        <van-cell title="企业信息" is-link />
        <van-cell title="帮助中心" is-link />
        <van-cell title="关于我们" is-link />
      </div>
    </div>
    <div class="sign-out">
      <van-button type="primary" size="large" replace to="/login" @click="removeMsg" >退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import moment from 'moment'
import { removeAutoToken } from "@/common/localStoreToken";
import { removeToken } from "@/common/sessionStoreToken";
import Header from "@/components/header.vue";
import { removePhone } from '@/common/phoneStore';
import { getPicApi,userInfoApi,userUpdateApi } from '@/api/userApi';
export default {
  data() {
    return {
      title: '乐呗采购管理系统',
      show: false,
      name: "",
      mail: "",
      address: "",
      birthday: "", //生日
      imgData:"",
      fileList:[],
      file:'',
      photo:'',
    };
  },
  computed: {
    ...mapGetters("common", ["userInfo"]),
    src(){
      return 'http://www.shuiyue.info:20000' + this.photo
    }
  },
  methods: {
    /**
     * 清除token信息
     */
    removeMsg(){
        removeAutoToken()
        removeToken()  
    },
    /**
     * 删除预览头像
     * @param {*} file 
     */
    delHeadImg(file){
        this.file = ''
    },
    //保存头像
    afterRead(file) {
      // let formData = new FormData()
      // formData.append('file',file.file)
      // console.log(formData,'formData');
      // let arr = [file.file]
        this.file = file 
       
      // 此时可以自行将文件上传至服务器
      // this.converBase64(file.file).then(data=>this.imgData=data).catch(err=>console.log("图片出错"))
    },
        // ==========用户头像上传==========
    // File转base64
    converBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
      })
    },
    //清除缓存
    cachePhone(){
      removePhone()
    },
    cacheStore(){
      this.$store.commit('common/REMOVE_STATE')
    },
     clearCache() {
                this.$dialog.confirm({
                        title: '清除缓存',
                        message: '确定要清除缓存吗?'
                    })
                    .then( () => {
                      this.cachePhone()
                      this.removeMsg()
                      this.cacheStore()
                      this.$toast('清除成功')
                      this.$router.replace('/prologue')
                    })
                    .catch(() => {
                    });
            },
    showPopup() {
      this.show = true;
    },
    //图片上传前
    beforeRead(file) {
      console.log("上传前",file);
    const imgformat = /image\/(png|jpg|jpeg)$/;
    if (!imgformat.test(file.type)) {
        this.$toast.fail('请上传 jpg/jpeg/png 格式图片');
        return false;
    }
      return true;
    },
    // 点击保存用户信息
    async onSubmit() {
        if(this.file){
        let val =await getPicApi({type:'touxiangFile',data:this.file.content,name:'touxiang'})
        if (val.code !== 200) {
          this.$toast.fail('图片上传失败');
          return
        }
        console.log('上传成功');
        this.photo = val.data
        }
        debugger
       let data = await userUpdateApi({
        id:this.userInfo.id,
        name:this.name,
        email:this.mail ,
        address:this.address ,
        birthday:this.birthday , //生日
        photo:this.photo
       })
       if(data.code !== 200){
        this.$toast.fail('修改失败');
        return 
       }
       let response = await userInfoApi(this.userInfo.id)
       this.$store.commit('common/SAVE_USERINFO',response.data)
       this.$toast.success('修改成功');

}
    
  },
  mounted() {
    // console.log(this.userInfo);
    this.name = this.userInfo.name;
    this.mail = this.userInfo.email;
    this.address = this.userInfo.address;
    this.birthday = moment(this.userInfo.birthday).format("YYYY-MM-DD");
    this.photo = this.userInfo.photo
  },
  components: { Header }
};
</script>

<style lang='less' scoped>
@import "@/style/common.less";
  .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
.van-hairline--bottom {
  background-color: #6199ff;
}

.header/deep/ .van-nav-bar__title {
  color: #f2f2f2 !important;
  font-size: 20px;
}

.set-container {
  .my-box();

  >header {
    display: block;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 22px;
    color: @c10;
    background-color: @c1;

    span {
      font-size: @20;
    }
  }

  >.user {
    margin: 6px;
    height: 100px;
    padding: 2px;
    border-radius: 8px;
    box-shadow: 0 0 2px;
    line-height: 24px;

    >title {
      display: flex;
      justify-content: space-evenly;

      >.photo {
        display: block;
        // border: 1px solid green;
        width: 82px;
        height: 82px;
        border-radius: 25%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .user {
        p {
          color: @c1;
          font-size: @18;
          font-weight: 600;
          margin: 0;
        }

        >span {
          font-size: @14;
          color: @c1;
        }
      }

      .user-msg {
        line-height: 82px;
        display: block;
        font-size: @14;
        color: @c3;

        .van-cell__value--alone {
          color: @c3;
          line-height: 68px;
        }
      }
    }
  }

  .content {
    padding: 32px;
    line-height: 68px;

    >.user-list {
      .van-cell {
        font-size: @16;
        color: @c3;
        font-weight: 600;
      }
    }
  }

  .sign-out {
    display: block;
    padding: 12px;
    margin-top: 12px;

    .van-button {
      background-color: @c3;
    }
  }
}
</style>